<template>
  <div class="box">
    <div class="title">
      <van-icon class="icon" name="arrow-left" @click="returnFn" />
      生成海报
    </div>
    <div class="content"></div>
    <div class="code"></div>
  </div>
</template>

<script>
import { defineComponent, getCurrentInstance, nextTick, ref } from "vue";
import { useRouter } from "vue-router";
import * as PIXI from "pixi.js";
import hb2 from "@/assets/image/hb1.png";
import hb1 from "@/assets/image/hb2.png";
import QRCode from "qrcodejs2";

export default defineComponent({
  setup() {
    const { proxy } = getCurrentInstance();
    const router = useRouter();
    const codeImage = ref("");
    const returnFn = () => {
      router.go(-1);
    };
    const pcode = JSON.parse(localStorage.getItem("info")).code;
    // 生成二维码
    const setCode = async () => {
      await nextTick();
      const myCode = document.querySelector(".code");
      const code = new QRCode(myCode, {
        width: 100, // 二维码的宽
        height: 100, // 二维码的高
        text: `http://ybjh.xingive.com/#/login?pcode=${pcode}`, // 二维码的内容
        colorDark: "#000", // 二维码的颜色
        colorLight: "#fff",
        correctLevel: QRCode.CorrectLevel.H,
      });
      const canvas = code._el.querySelector("canvas"); //获取生成二维码中的canvas，并将canvas转换成base64
      const base64Text = canvas.toDataURL("image/png");
      codeImage.value = base64Text;
      pixijs();
    };

    setCode();

    const pixijs = async () => {
      await nextTick();
      const content = document.querySelector(".content");
      const width = content.offsetWidth;
      const height = content.offsetHeight;
      //创建一个renderer
      const app = new PIXI.Application({
        width,
        height,
        backgroundColor: 0xffffff,
      });
      content.appendChild(app.view);
      // 容器
      const container = new PIXI.Container();
      container.interactive = true;
      container.buttonMode = true;
      container.backgroundColor = 0xffffff;
      container.on("pointerdown", pointerDownFn);

      function pointerDownFn() {
        const image = app.renderer.plugins.extract.image(container);
        const a = document.createElement("a");
        a.setAttribute("href", image.src);
        a.setAttribute("download", "img");
        a.setAttribute("target", "_blank");
        let clickEvent = document.createEvent("MouseEvents");
        clickEvent.initEvent("click", true, true);
        a.dispatchEvent(clickEvent);
      }

      // 白底
      const rect = new PIXI.Graphics();
      rect.beginFill(0xffffff);
      rect.drawRect(0, 0, width, height);
      rect.endFill();
      container.addChild(rect);

      // 图片
      const loader = new PIXI.Loader();
      loader.add("hb1", hb1).add("hb2", hb2).add("code", codeImage.value);
      loader.load((loader, resources) => {
        console.log("loader---", loader);
        console.log("resources---", resources);

        const hb1 = new PIXI.Sprite(resources.hb1.texture);
        hb1.width = width;
        hb1.height = (width / 3) * 2;
        hb1.x = 0;
        hb1.y = 0;
        hb1.zIndex = 2;
        container.addChild(hb1);

        const hb2 = new PIXI.Sprite(resources.hb2.texture);
        hb2.width = width;
        hb2.height = (width / 3) * 2;
        hb2.x = 0;
        hb2.y = height - hb2.height - 100;
        hb2.zIndex = 2;
        container.addChild(hb2);

        // 二维码
        const code = new PIXI.Sprite(resources.code.texture);
        code.width = 60;
        code.height = 60;
        code.zIndex = 2;
        code.x = width - code.width - 20;
        code.y = height - code.height - (100 - code.height) / 2;
        container.addChild(code);
        console.log("resources.code---", resources.code);
      });

      // 文字
      const style = new PIXI.TextStyle({
        fontSize: "17px",
        fontWeight: "bold",
        color: "#444444",
      });
      const text = new PIXI.Text("长按保存图片分享好友 ", style);
      text.x = 20;
      text.y = height - text.height - (100 - text.height) / 2;
      text.zIndex = 9;
      console.log("text---", text);
      container.addChild(text);

      app.stage.addChild(container);
    };

    return {
      returnFn,
      proxy,
      codeImage,
    };
  },
});
</script>

<style lang="less" scoped>
.box {
  min-height: 100vh;
  background-color: var(--backColorTwo);
  color: #666666;
  .title {
    width: 100%;
    height: 60px;
    font-size: 1.125rem;
    font-family: PingFang SC;
    font-weight: bold;
    color: #fff;
    text-align: center;
    line-height: 60px;
    position: relative;
    padding: 0 4%;
    background-color: #212121;

    .icon {
      position: absolute;
      top: 50%;
      left: 10px;
      font-size: 1.5rem;
      transform: translateY(-50%);
    }
  }

  .content {
    height: calc(100vh - 60px);
    width: 100%;
    background-color: #fff;
  }
  .code {
    display: none;
  }
}
</style>
